<template>
  <view class="body">
    <view class="body_item">
      <view>退款商品</view>
      <template v-for="item in detail.items" :key="item.id">
        <view class="flex goodsItem" v-if="form.orderItemIds.includes(item.id)">
          <view
            class="goods-cover cover"
            :style="{ backgroundImage: `url(${item.productImageUrl})` }"
          ></view>
          <view class="flex" style="width: 100%">
            <view class="goods-name">
              {{ item.productName }}
            </view>
            <view class="order-total">
              <view class="goods-price">¥{{ item.productSkuPrice || 0 }}</view>
              <view class="goods-count">x{{ item.productSkuQuantity }}</view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="body_item">
      <view class="item_content">
        <view class="item_left">退款原因</view>
        <view class="item_right" @click="visible = true">
          <input v-model="form.refundReason" disabled placeholder="请输入" />
          <image class="arrow" :src="ossImg('others/component/right.png')" />
        </view>
      </view>
    </view>

    <view class="body_item">
      <view class="item_content">
        <view class="item_left">退款金额</view>
        <view class="item_right">
          <view class="text-primary price">{{ refundTotalPrice }}</view>
        </view>
      </view>
    </view>

    <view class="body_item">
      <view class="item_content" style="display: block">
        <view class="item_left">退款说明</view>
        <view class="item_right">
          <textarea
            v-model="form.description"
            placeholder="请填写退款说明"
            maxlength="30"
          />
        </view>
      </view>
    </view>

    <view class="confirmBtn">
      <button @click.stop="submit">确认</button>
    </view>
  </view>

  <oreo-popup round :show="visible" position="bottom">
    <refund-reason
      v-if="visible"
      @close="visible = false"
      :value="form.refundReason"
      @confirm="handleRefundReason"
    />
  </oreo-popup>

  
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { GetOrderDetail, refundCreate } from "@/services/mall";
import RefundReason from "@/components/refundReason";
import { cal } from "@/utils/cal";
import { message, ossImg, debounce } from "@/utils/utils";
import privacyPopup from "@/components/privacy-popup";

const visible = ref(false);

const form = reactive({
  orderId: "", // id
  refundReason: "", // 退款原因
  orderItemIds: [], // 退款商品skuId数组
  refundScope: 1, // 退款类型
  description: "", // 说明
});

const detail = ref({});
const refundTotalPrice = ref(0);

onLoad((option) => {
  console.log(option);
  form.refundScope = parseInt(option.type);
  form.orderItemIds = option.goodsId.split(",");
  form.orderId = option.orderId;
  getApp().accessLogAdd();
  GetDetail(option.orderId);
});

const submit = debounce(
  async () => {
    console.log(form);
    const res = await refundCreate({ ...form });
    if (res?.code === 200) {
      message("提交成功");
      uni.navigateBack({
        delta: 2,
      });
    } else {
      message(res.message);
    }
  },
  500,
  false
);

const GetDetail = async (id) => {
  const res = await GetOrderDetail(id);
  if (res?.code === 200) {
    for (const item of res.data.items) {
      if (form.orderItemIds.includes(item.id)) {
        Object.assign(item, {
          refundPrice: cal.jian(
            cal.cheng(item.productSkuPrice, item.productSkuQuantity),
            item.subCouponAmount
          ),
        });
      }
    }
    detail.value = res.data;
    refundTotalPrice.value = detail.value.items.reduce((pre, cur) => {
      return cal.jia(pre, cur.refundPrice);
    }, 0);
    if (
      !detail.value.items.every((item) =>
        [1, 2, 3, 4, 5, 41, 31, 6].includes(item.refundStatus)
      )
    ) {
      refundTotalPrice.value = cal.jia(
        refundTotalPrice.value,
        detail.value.freightAmount
      );
    }

    console.log(detail.value);
  }
};

const handleRefundReason = (val) => {
  console.log(val);
  form.refundReason = val;
  visible.value = false;
};

const linkTo = (url) => uni.navigateTo({ url });
</script>

<style lang="less" scoped>
.body {
  box-sizing: border-box;
  padding: 10px;

  .body_item {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 14px;
    margin-bottom: 10px;

    .goodsItem {
      margin-top: 10px;
    }

    .goods-cover {
      width: 68px;
      min-width: 68px;
      height: 68px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .goods-name {
      padding: 0 12px 0 8px;
      box-sizing: border-box;
      font-size: 14px;
      flex: 1;
      color: #353535;
    }

    .order-total {
      color: #353535;
      text-align: right;
      font-size: 14px;

      .goods-count {
        font-size: 12px;
        color: #818181;
        line-height: 1;
        margin-top: 5px;
      }
    }

    .submit-price {
      font-size: 16px;
      font-weight: bold;
    }

    .refundType {
      justify-content: space-between;
      align-items: center;
    }

    .item_content {
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .item_left {
        margin: auto 0px;
      }

      .item_right {
        height: 100%;
        color: #999;
        align-items: center;
        display: flex;

        textarea {
          margin-top: 10px;
          box-sizing: border-box;
          width: 100%;
          height: 100px;
          background-color: rgb(247, 247, 247);
          padding: 30rpx;
        }

        input {
          text-align: right;
        }

        .arrow {
          width: 10rpx;
          height: 18rpx;
          margin-left: 10px;
        }
      }
    }
  }

  .confirmBtn {
    box-sizing: border-box;
    position: fixed;
    bottom: 30px;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;

    button {
      width: 300px;
      height: 40px;
      line-height: 40px;
      background: #0058c6;
      border-radius: 20px;
      color: white;
      font-size: 16px;

      &::after {
        border: none;
      }
    }
  }
}
</style>
